<script setup>
import { onMounted } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { useUserStore } from '@/stores/userStore'
const cartStore = useCartStore()
const userStore = useUserStore()

onMounted(() =>
	// 更新购物车
	{
		const token = userStore.userToken.accessToken
		if (token) {
			cartStore.getAllCount()
		}
	}
)
</script>

<template>
	<div class="cart-button" @click="$router.push('/cartlist')">
		<el-badge :value="cartStore.allCount || 0" :hidden="!cartStore.allCount" :offset="[-2, 17]">
			<img src="../../assets/images/ShoppingCart.png" alt="" />
		</el-badge>
	</div>
</template>

<style scoped lang="scss">
.cart-button {
	cursor: pointer;
	width: 65px;
	height: 65px;
	background: $xtxColor;
	position: fixed;
	top: calc((100% - 500px) / 2);
	right: 0;
	z-index: 999;
	text-align: center;
	line-height: 65px;
	img {
		width: 32px;
		height: 32px;
	}
}
</style>